import {contextMenuOptions} from "./types"
import PoiMarker from "@/components/mapForm/img/poi-marker.png";


export const useMap = () => {
  const state = shallowRef({
    isDraw: false //是否在绘制中
  })

  const setDraw = (is: boolean) => {
    state.value = {
      isDraw: is
    }
  }

  //文本提示信息
  const tooltipOption = {
    "polygon": "点击鼠标左键选择拐点, <br>[单击鼠标右键或双击鼠标左键] 完成区域绘制"
  }

  //提示文本样式
  const textOptions = {
    style: {'background-color': 'var(--bg-2)'},
  }

  const theme = {
    darkblue: 'amap://styles/darkblue',
    normal: 'amap://styles/normal'
  }

  /*el-amap-label-marker 标点 图标*/
  const labelOptions = {
    blueMarker: {
      icon: {
        image: PoiMarker,
        anchor: 'bottom-center',
        size: [23, 36],
        clipOrigin: [283, 6],
        clipSize: [46, 70]
      }
    },
    redMarker: {
      icon: {
        image: PoiMarker,
        anchor: 'bottom-center',
        size: [23, 36],
        clipOrigin: [719, 6],
        clipSize: [47, 70]
      }
    }
  }

  /*高德地图icon https://lbs.amap.com/api/javascript-api-v2/documentation#icon*/
  const amapIcon = {
    redMarker: new AMap.Icon({
      image: PoiMarker,
      size: [25, 36],
      imageOffset: [-360, -3],
      imageSize: [440, 262]
    })
  }

  const polyFillColor = {
    fillColor: "#adea9f",
    hoverFillColor: "#7bccc4"
  }

  const polyOption = {
    draggable: false,
    visible: true,
    edit: false,
    path: [],
    fillColor: polyFillColor.fillColor,
    strokeOpacity: 1,
    fillOpacity: 0.5,
    strokeColor: polyFillColor.fillColor,
    strokeWeight: 1,
    strokeStyle: 'dashed',
    strokeDasharray: [5, 5],
  }

  //右键菜单
  const registerContextMenus = (map, options: contextMenuOptions) => {
    //创建右键菜单
    var contextMenu = new AMap.ContextMenu();
    let contextMenuPositon;
    //右键添加Marker标记
    if (options.addMarker) {
      contextMenu.addItem("添加标记", (e) => {
        options.addMarker(contextMenuPositon)
        contextMenu.close()
      }, 1);
    }

    //地图绑定鼠标右击事件——弹出右键菜单
    map.on('rightclick', function (e) {
      /*绘制地图是不显示*/
      if (state.value.isDraw) {
        return
      }
      contextMenu.open(map, e.lnglat);
      contextMenuPositon = e.lnglat;
    });

    return contextMenu
  }

  return {
    tooltipOption,
    textOptions,
    theme,
    polyOption,
    polyFillColor,
    labelOptions,
    amapIcon,
    setDraw,
    registerContextMenus
  }
}


